<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      //一.如何创建对象
      //1.实例化内置构造函数
      var obj = new Object({ name: "张三" });
      console.log(obj);

      //2.字面量创建对象
      var obj = { name: "张三" };
      console.log(obj);

      //3.工厂模式
      function Factory() {
        var obj = {};
        obj.name = "张三";
        obj.age = 20;
        return obj;
      }
      var obj = Factory();
      console.log(obj);

      //4.构造函数
      function Person(name) {
        this.name = name;
      }
      var zhangsan = new Person("张三");
      console.log(zhangsan);

      //二.通过Object.create创建对象
      //1.创建对象的原型
      //注意断崖式更新
      //_myname
      var obj = Object.create({ myname: "张三" });
      console.log(obj);
      console.log(obj.__proto__); //不规范
      console.log(Object.getPrototypeOf(obj)); //获取对象的原型

      //2.可以创建可控对象
      var obj2 = {
        height: "180cm",
      };
      console.log(obj2);

      var obj = Object.create(
        {},
        {
          myname: {
            value: "张三",
            // enumerable: true,
          },
          age: {
            value: 20, //value 对象的键值
            configurable: true, //默认false 默认对象的这个属性不能被配置,不能被删除掉
            enumerable: true, //  默认false是否可枚举  如果可枚举 那么就可以被for循环
          },
        }
      );
      // console.log(obj);
      //delete obj.age; //删除对象里的age属性
      console.log(obj);

      for (var key in obj) {
        console.log(key); //没有结果,因为没有设置是否能枚举
      }

      //三.Object.create的存取器写法

      //能拆分 value值
      //存 : 对象键值的设置  setter
      //取 : 对象的获取  getter

      var obj = {
        myname: "张三",
        age: 20,
      };
      //存:设置对象属性 设置 set
      obj.myname = "李四"; //set 设置

      //取: 获取对象的键值 : 获取  get
      obj.myname; //获取值, get

      var obj = Object.create(
        {},
        {
          myname: {
            //不要value
            get: function () {
              console.log("myname当获取这个属性的时候执行get函数");
              return "张三"; //这个返还值就是对象的键值
            },
            set: function (newValue) {
              console.log(
                "myname当设置这个属性的时候执行set这个函数",
                newValue
              );
            },
            configurable: true,
            enumerable: true,
          },
          age: {
            //不要value
            get: function () {
              console.log("age当获取这个属性的时候执行get函数");
              return "张三"; //这个返还值就是对象的键值
            },
            set: function (newValue) {
              console.log("age当设置这个属性的时候执行set这个函数", newValue);
            },
            configurable: true,
            enumerable: true,
          },
        }
      );
      obj.age; //get 操作  获取属性操作 那么会触发age的函数
      obj.age = 30; //set操作  会触发age属性下的set函数

      console.log(obj);

      // console.log({ hello: "123", height: 150 });

      //observe 观察
    </script>
  </body>
</html>
